<div class="list-group">
  <ul id="list-group-category">
    {% for category in categories %}
      <li id="category-collapse{{ category.category_id }}" class="panel {% if category.category_id == category_id %}current{% endif %}">
        <a class="out" href="{{ category.href }}">{{ category.title }}</a>
        {% if category.children %}
          <a href="#list-group-category-{{ category.category_id }}" data-toggle="collapse" class="data-collapsed collapsed out" data-parent="#list-group-category"><i class="iconfont">&#xe604;</i></a>
          <ul id="list-group-category-{{ category.category_id }}" class="sub-category collapse {% if category.category_id == category_id %}in{% endif %}">
            {% for child in category.children %}
              <li class="sub-list-link"><a href="{{ child.href }}" class="list-group-item">{{ child.title }}</a></li>
            {% endfor %}
          </ul>
        {% endif %}
      </li>
    {% endfor %}
  </ul>
</div>
